<script setup lang="ts">
import { Question } from '@/api/subject/type';
import { showToast } from 'vant';
import { ref } from 'vue';

const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    }
});

const question = ref({} as Question);
const emit = defineEmits(["submit"]);

const submit = () => {
    if (!question.value.title || !question.value.title.trim()) {
        showToast('题目描述不能为空');
        return;
    }
    
    if (!question.value.answer || !question.value.answer.trim()) {
        showToast('参考答案不能为空');
        return;
    }
    
    question.value.type = 'Essay';
    emit('submit', question.value);
}
</script>

<template>
    <div class="essay-question-form" :class="{ 'is-disabled': disabled }">
        <div class="form-section">
            <h3 class="section-title">题目内容</h3>
            
            <div class="question-content">
                <van-field
                    v-model="question.title"
                    placeholder="请输入题目描述"
                    type="textarea"
                    rows="4"
                    maxlength="2000"
                    show-word-limit
                    :disabled="disabled"
                    :rules="[{ required: true, message: '请填写题目描述' }]"
                />
            </div>
        </div>
        
        <div class="form-section">
            <h3 class="section-title">参考答案</h3>
            
            <div class="answer-content">
                <van-field
                    v-model="question.answer"
                    placeholder="请输入参考答案"
                    type="textarea"
                    rows="6"
                    maxlength="5000"
                    show-word-limit
                    :disabled="disabled"
                    :rules="[{ required: true, message: '请填写参考答案' }]"
                />
            </div>
            
            <div class="answer-tip">
                <van-icon name="info-o" />
                <span>参考答案将在用户提交后展示，可以帮助用户对比和学习</span>
            </div>
        </div>
        
        <div class="form-actions">
            <van-button 
                type="primary" 
                block 
                round 
                @click="submit"
                :disabled="disabled"
                :loading="disabled"
                loading-text="提交中"
            >
                提交
            </van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.essay-question-form {
    &.is-disabled {
        opacity: 0.8;
        pointer-events: none;
    }
    
    .form-section {
        margin-bottom: 24px;
        
        .section-title {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
            margin: 0 0 16px 0;
        }
    }
    
    .answer-tip {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        font-size: 13px;
        color: #909399;
    }
    
    .form-actions {
        margin-top: 32px;
        
        .van-button {
            height: 44px;
            font-size: 16px;
        }
    }
}
</style>